<template>
    
    <!-- 组件的模板 -->
     <div class="page attendance-set">
        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" for="s12">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox1" class="weui-check" id="s12" v-model='requireField.position'>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>位置</p>
                </div>
            </label>  
            <label class="weui-cell weui-check__label" for="s13">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox1" class="weui-check" id="s13" v-model='requireField.remark'>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>备注</p>
                </div>
            </label> 
            <label class="weui-cell weui-check__label" for="s11">
                <div class="weui-cell__hd">
                    <input type="checkbox" class="weui-check" name="checkbox1" id="s11"  v-model='requireField.photo'>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>拍照<span class="tip">(最多上传五张示例图片)</span></p>
                </div>
            </label>
            <div class="upload-pic clearfix">
                <ul class="pic-list">
                    <li v-for="item in imagesArr">
                        <img :src="item" alt="" @click="showBigImg($index)">
                        <span class="btn-delete" @click="deleteImages($index)"></span>
                    </li>
                </ul>
                <div class="uploader" @click="selectImage" v-if="requireField.photo == 1 && imagesArr.length < 5"><div></div></div>
                <div class="uploader disabled" v-if="requireField.photo == 0"><div></div></div>
                <div class="uploader disabled" v-if="imagesArr.length == 5 && requireField.photo == 1"><div></div></div>
            </div>           
        </div>
        <div class="btn-box bg-color fixed" @click="submit"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import clientUi from 'gapi/clientUi.js'
    import widget from 'gapi/widget.js'
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                requireField:{photo:0,position:1,remark:0},
                imagesArr:[],
                bigImg:[]
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                cache.getMemoryCache('requireField', (data) => {
                    console.log(data)
                    this.requireField.photo = Number(data.require_field.photo)
                    this.requireField.position = Number(data.require_field.position)
                    this.requireField.remark = Number(data.require_field.remark)
                    if(data.img_url.length && data.img_thumb_url.length){
                        data.img_url.forEach( (urlitem) => {
                            this.bigImg.push(urlitem)
                        })
                        data.img_thumb_url.forEach( (thumbitem) => {
                            this.imagesArr.push(thumbitem)
                        })
                    }
                })
            },
             selectImage (){
                let isEdit = 0;   //isEdit 为 0 不可裁剪，为 1 可裁剪
                if(this.imagesArr.length < 5){
                    clientUi.selectAndUploadImage((data) => {
                        console.log(data)
                        if(data.status == '1'){
                            this.imagesArr.push(util.baseImageDomain + data.imageURL)
                            this.bigImg.push(util.baseImageDomain + data.info[0].url)
                        }
                    }, isEdit)
                }else{
                    widget.toast('最多上传五张示例图片')

                }
            },
            deleteImages (index){
                this.imagesArr.splice(index,1)
                this.bigImg.splice(index,1)
            },
            showBigImg (index){
                clientUi.bigPicturePreview('',this.bigImg,index)
            },
            isGetImage (){
                let that = this
                this.$watch('requireField.photo', (newVal, oldVal) => {
                    if(newVal == 0 && this.imagesArr.length){
                       clientUi.showDialog('提醒', '你已上传示例图，确定要放弃吗', function(data){
                            if(data.status == 1){
                               that.requireField.photo = 0
                               that.imagesArr.splice(0,that.imagesArr.length);//清空数组 
                               that.bigImg.splice(0,that.bigImg.length);//清空数组 
                            }else{
                                that.requireField.photo = 1
                            }
                        })
                    }
                })
            },
            submit(){
                this.requireField.photo = this.requireField.photo?1:0
                this.requireField.position = this.requireField.position?1:0
                this.requireField.remark = this.requireField.remark?1:0
                if(this.requireField.photo == 1){
                    let preamImage = {
                        img_thumb_url : this.imagesArr,
                        img_url : this.bigImg
                    }
                    commonPage.goBack(1,{'key':'requireField','value':this.requireField,'arrImg':preamImage})
                }else{
                    commonPage.goBack(1,{'key':'requireField','value':this.requireField})
                }
            }
        },
        created(){
            this.init();
            this.isGetImage()
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/attendance-set.css"></style>


